<template>
  <div class="app-container">
    <el-form :inline="true" ref="ruleForm" :model="formInline" class="demo-form-inline">
      <el-form-item :label="$t('language.finance.recharge.rechargeTime')" prop="time">
            <el-date-picker
              v-model="formInline.time"
              type="datetimerange"
              align="right"
              unlink-panels
              :range-separator="$t('language.finance.recharge.to')"
              :start-placeholder="$t('language.finance.recharge.startDate')"
              :default-time="['00:00:00', '23:59:59']"
              :end-placeholder="$t('language.finance.recharge.endDate')"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerDayStep">
            </el-date-picker>
      </el-form-item>

      <el-form-item :label="$t('language.finance.recharge.depositAmount')">
        <el-col :span="11">
          <el-form-item prop="minAmount">
            <el-input
              @keyup.enter.native="formatSearch"
              v-model="formInline.minAmount"
              type="number"
              :placeholder="$t('language.finance.recharge.inputPrompt')"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col class="line" :span="2" style="text-align: center;">-</el-col>

        <el-col :span="11">
          <el-form-item prop="maxAmount">
            <el-input
              @keyup.enter.native="formatSearch"
              v-model="formInline.maxAmount"
              type="number"
              :placeholder="$t('language.finance.recharge.inputPrompt')"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item :label="$t('language.finance.recharge.depositType')" prop="limitType">
        <el-select v-model="formInline.limitType" :placeholder="$t('language.finance.publicFilters.selectDeposit')">
           <el-option
            v-for="item in $t('language.finance.consts.DEPOSIT_TYPE')"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('language.finance.recharge.operationEnd')" prop="clientType">
        <el-select v-model="formInline.clientType" :placeholder="$t('language.finance.recharge.operationEndPrompt')">
          <el-option
            v-for="item in $t('language.finance.consts.PAYMENT_PLATFORM')"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('language.finance.recharge.recipientBank')" prop="bankId">
        <el-select v-model="formInline.bankId" :placeholder="$t('language.finance.publicFilters.selectBank')">
          <el-option value="">{{$t('language.finance.publicFilters.all')}}</el-option>
          <el-option
            v-for="item in $t('language.finance.consts.PAYEE_BANKS')"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('language.finance.recharge.paymentStatus')" prop="status">
        <el-select
          multiple
          collapse-tags
          v-model="formInline.status"
          :placeholder="$t('language.finance.publicFilters.selectPaymentStatus')">
          <el-option
            v-for="item in $t('language.finance.consts.AUTO_PAYMENT_STATUS')"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('language.finance.recharge.paymentTypes')" prop="paymentId">
        <el-select v-model="formInline.paymentId" :placeholder="$t('language.finance.publicFilters.selectPaymentType')">
          <el-option
            v-for="item in $t('language.finance.consts.RECHARGE_TRANSFER_TYPE_NAMES')"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item class="with-pre-select" prop="keywords">
        <el-input
          @keyup.enter.native="formatSearch"
          :placeholder="$t('language.finance.publicFilters.keyword')"
          v-model="formInline.keywords" class="input-with-select">
          <el-select
            @change="searchTypeChange"
            v-model="formInline.searchType" slot="prepend" placeholder="查询范围">
            <el-option :label="$t('language.finance.recharge.rechargeNumber')" :value="1"></el-option>
            <el-option :label="$t('language.finance.recharge.accountName')"  :value="2"></el-option>
            <el-option :label="$t('language.finance.recharge.name')" :value="3"></el-option>
            <el-option :label="$t('language.finance.recharge.phoneNumber')" :value="4"></el-option>
            <el-option :label="$t('language.finance.recharge.nameOfPayee')" :value="8"></el-option>
            <el-option :label="$t('language.finance.recharge.recipientBankCard')" :value="9"></el-option>
          </el-select>
        </el-input>
      </el-form-item>

      <el-form-item :label="$t('language.finance.recharge.level')" prop="level">
        <el-select v-model="formInline.level" multiple collapse-tags :placeholder="formInline.level?'':$t('language.finance.publicFilters.selectLevel')">
          <el-option
            v-for="item in levelList"
            :label="item.name"
            :key="item.levelId"
            :value="item.levelId"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('language.finance.recharge.accountType')"  prop="userType">
        <el-select
          v-model="formInline.userType"
         :placeholder="$t('language.finance.publicFilters.accountType')"
        >
          <el-option
            v-for="item in $t('language.finance.consts.USER_TYPE')"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('language.finance.recharge.receiptMerchant')"  prop="merchant">
        <el-select
          filterable
          v-model="formInline.merchant"
          :placeholder="$t('language.finance.publicFilters.accountType')"
          @change="handleReceiptMerchantChange"
        >
          <el-option label="全部" :value="undefined">全部</el-option>
          <el-option
            v-for="item in receiptMerchantData"
            :label="item.channelName"
            :key="item.channelId"
            :value="item.channelId"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('language.finance.recharge.receiptMerchantNumber')"  prop="merchantCode">
        <el-input v-model="formInline.merchantCode" :placeholder="$t('language.finance.publicFilters.accountType')"></el-input>
      </el-form-item>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="formatSearch"
      >
       {{ $t('language.table.search') }}
      </el-button>
      <el-button @click="selfResetForm('ruleForm')">{{ $t('language.table.reset') }}</el-button>
    </el-form>
  </div>

</template>

<script>
import { getUserLevelList } from '@/services/api/userLevel';
import { getPaymentManageChannelList } from '@/services/api/recharge';
import { getEscrowShopNoList } from '@/services/api/recharge';
import { form, grid, pickerOption } from '@/build';
import setOrderStatus from './mixins/setOrderStatus';

export default {
  name: 'form-filter',
  mixins: [form, grid, pickerOption, setOrderStatus],
  data() {
    return {
      auditApplyList: [],
      levelList: [],
      // groupList: [],
      limitType: 0,
      formInline: {
        dateType: 1,
        searchType: 1,
        limitType: -1,
        clientType: -1,
        time: [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')],
        minAmount: undefined,
        maxAmount: undefined,
        paymentId: -3,
        status: [0, 5, 6, 3],
        keywords: undefined,
        bankId: undefined,
        userType: -1,
        level: undefined,
        merchant: undefined,
        merchantCode: undefined,
      },
      receiptMerchantData: [],
      receiptMerchantNumberList: [],
    };
  },

  methods: {
    formatSearch() {
      let level = [];
      let { status } = this.formInline;
      if (this.formInline.level.length > 0) {
        level = this.formInline.level.join();
      }
      if (status.length === 0) {
        status = [0, 5, 6, 3];
      }
      const filters = this.setOrderStatus({ ...this.formInline, status }, [0, 3], [5, 6]);
      const formInline = _.cloneDeep(this.formInline);
      this.$emit('on-filter', { ...formInline, ...filters, level });
    },
    searchTypeChange() {
      this.formInline.keywords = undefined;
    },
    selfResetForm(formName) {
      this.resetForm(formName);
      this.formatSearch();
    },
    async handleReceiptMerchantChange(val) {
      const id = _.find(this.receiptMerchantData, { channelName: val }).channelId;
      this.receiptMerchantNumberList = [];
      try {
        const [bool, result] = await getEscrowShopNoList({ channelId: id, limitType: this.limitType });
        if (!bool) return;
        this.receiptMerchantNumberList = result.list || [];
      } catch (e) {
        // don't handle
      }
    },
  },
  mounted() {
    this.bindGet(getUserLevelList, 'levelList', {});
    // this.bindGet(getUserGroupList, 'groupList', {});// todo 2-获取群组
    // this.bindGet(getDepositAppAccountInuse, 'receiptMerchantData', {
    //   action: 'getReceiptMerchant',
    //   beforeSend: () => ({
    //     limitType: this.limitType,
    //   }),
    // });
    this.bindGet(getPaymentManageChannelList, 'receiptMerchantData', { });
    this.getAll();
  },
};
</script>

<style lang="scss" scoped>
  .with-pre-select {
    .el-input-group__prepend {
      .el-select {
        width: 120px;
      }
    }
  }

  .money-range {
    .el-input {
      width: 100px;
    }
  }

</style>
